// 方向名称映射（与后端方向码对应）
const dirNames = {
    0: '停止',
    1: '前进',
    2: '后退',
    3: '左前',
    4: '右前',
    5: '左后',
    6: '右后'
};

let currentDir = 0; // 当前执行方向
const logContainer = document.getElementById('log-container');

// 页面加载完成后初始化
window.onload = async () => {
    // 初始化速度滑块范围（从后端获取配置）
    await initSpeedRange();
    // 定时刷新状态（50ms 一次）
    setInterval(refreshStatus, 50);
    // 监控摄像头状态
    setInterval(checkCameraStatus, 1000);
};

// 初始化速度滑块范围
async function initSpeedRange() {
    try {
        const res = await fetch('/status');
        const data = await res.json();
        if (data.ok) {
            const minSpeed = data.min_speed || 0;
            const maxSpeed = data.max_speed || 100;
            const targetSpeed = data.target_speed || 50;

            // 更新滑块和显示
            const slider = document.getElementById('speed-slider');
            slider.min = minSpeed;
            slider.max = maxSpeed;
            slider.value = targetSpeed;
            document.getElementById('speed-display').innerText = targetSpeed;
            document.getElementById('target-speed').innerText = targetSpeed;
            document.getElementById('speed-range').innerText = `${minSpeed}-${maxSpeed}`;

            log('✅ 初始化完成，可开始操作');
        }
    } catch (err) {
        log(`⚠️  初始化失败：${err.message}`);
    }
}

// 实时更新速度显示（滑块拖动时）
function updateSpeedDisplay(value) {
    document.getElementById('speed-display').innerText = value;
}

// 确认速度（发送到后端）
async function confirmSpeed() {
    const speed = parseInt(document.getElementById('speed-slider').value);
    try {
        log(`🔧 调整速度中...（目标：${speed}）`);
        const res = await fetch('/ctrl/speed', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ s: speed })
        });
        const data = await res.json();
        if (data.ok) {
            document.getElementById('target-speed').innerText = speed;
            log(`✅ 速度调整成功！当前：${speed}（左轮：${data.left_wheel_speed} | 右轮：${data.right_wheel_speed}）`);
        } else {
            log(`❌ 速度调整失败：${data.error}`);
        }
    } catch (err) {
        log(`❌ 速度请求异常：${err.message}`);
    }
}

// 开始执行（按住按钮/触摸时）
async function startAction(event, dirCode) {
    event.preventDefault(); // 阻止浏览器默认事件（如长按菜单）
    if (currentDir === dirCode) return;

    currentDir = dirCode;
    const dirName = dirNames[dirCode] || '未知方向';
    const targetSpeed = document.getElementById('target-speed').innerText;

    // 更新页面状态
    document.getElementById('current-direction').innerText = dirName;
    log(`▶️  正在${dirName}...（速度：${targetSpeed}）`);

    try {
        const res = await fetch('/ctrl', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ d: dirCode })
        });
        const data = await res.json();
        if (!data.ok) {
            log(`❌ ${dirName}执行失败：${data.error}`);
            currentDir = 0;
            document.getElementById('current-direction').innerText = '停止';
        }
    } catch (err) {
        log(`❌ ${dirName}请求异常：${err.message}`);
        currentDir = 0;
        document.getElementById('current-direction').innerText = '停止';
    }
}

// 停止执行（松开按钮/触摸结束时）
async function stopAction() {
    if (currentDir === 0) return;

    const dirName = dirNames[currentDir] || '未知方向';
    currentDir = 0;

    // 更新页面状态
    document.getElementById('current-direction').innerText = '停止';
    log(`⏹️  已停止${dirName}`);

    try {
        const res = await fetch('/ctrl', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ d: 0 })
        });
        const data = await res.json();
        if (!data.ok) {
            log(`⚠️  停止指令失败：${data.error}`);
        }
    } catch (err) {
        log(`⚠️  停止请求异常：${err.message}`);
    }
}

// 刷新状态（从后端获取实时数据）
async function refreshStatus() {
    try {
        const res = await fetch('/status');
        const data = await res.json();
        if (data.ok) {
            // 更新轮速和状态
            document.getElementById('left-speed').innerText = data.left_wheel_speed;
            document.getElementById('right-speed').innerText = data.right_wheel_speed;
            document.getElementById('detailed-status').innerText = data.detailed_direction;
            // 同步方向（防止后端状态变更）
            if (currentDir !== data.direction) {
                currentDir = data.direction;
                document.getElementById('current-direction').innerText = data.direction_name;
            }
        }
    } catch (err) {
        console.error('状态刷新失败：', err);
    }
}

// 检查摄像头状态
function checkCameraStatus() {
    const img = document.getElementById('camera-feed');
    const statusText = document.getElementById('camera-status');
    if (img.complete && img.naturalHeight > 0) {
        statusText.innerText = '摄像头正常';
    } else {
        statusText.innerText = '摄像头加载中...';
    }
}

// 日志输出函数
function log(message) {
    const now = new Date().toLocaleTimeString();
    logContainer.innerHTML = `[${now}] ${message}\n` + logContainer.innerHTML;
    // 限制日志行数（最多 5 行）
    const lines = logContainer.innerHTML.split('\n');
    if (lines.length > 6) {
        logContainer.innerHTML = lines.slice(0, 5).join('\n');
    }
}